<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>

</head>
<body>
<div id="app">

    <h1>具名插槽使用</h1>

    <div style="background-color: aquamarine">
        <Home>
            <div slot="foot">
                <img src="./img/1.png" alt="" width="200px" height="300px">
            </div>
            <div slot="middle">
                <a href="">点我看美女</a>
            </div>
        </Home>
    </div>

    <hr>


</div>
</body>

<script>

    var vm = new Vue({
        el: '#app',
        data: {
            who: 'Home',
        },
        components: {
            Home: {
                template: `
                <div>
                <h3>我是首页</h3>
                <slot name="middle"></slot>
                <h3>结束了</h3>
                <slot name="foot"></slot>
                </div>
                                `
            },
        }

    })


</script>
</html>